<!doctype html>
 <head>
  <meta charset=utf-8>
  <title>MouseEvent - mousemove event order</title>
  <style>
    .testarea { margin: auto; width: 80%; height: 250px; border: 1px solid grey; position: relative; }

    #start,#end { background-color: red; border: 1px solid black; margin: 0; padding: 0; }
   /* start/end layout */
   #start.green,#end.green { background-color: green; }
   #start { position: absolute; left: 15%; top: 15%; width: 50%; height: 50%; }
   #end { position: absolute; right: 15%; bottom: 15%; width: 50%; height: 50%; }
  </style>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/resources/testdriver.js"></script>
  <script src="/resources/testdriver-actions.js"></script>
  <script src="/resources/testdriver-vendor.js"></script>
  <script>
   setup({explicit_timeout: true});
  </script>
  <script src="/uievents/resources/eventrecorder.js"></script>
 </head>
 <body>
 <p><strong>Description</strong>: Verifies that mousemove events track the pointer position and transition from top-most
 visible element to top-most visible element, changing targets
 in the DOM along the way.</p>

 <p><strong>Instructions</strong>: </p>
 <ol>
   <li>Move the pointer to the upper-left red box and then move it directly toward and into the lower-right red box.
 </ol>
 <p><strong>Test Passes</strong> if both boxes turn green and the word 'PASS' appears below</p>

 <section class="testarea">
  <div id="end"></div>
  <div id="start"></div>
 </section>

 <script>
    var mouse_test = async_test("Mousemove events");
    var start = document.getElementById("start");
    var end = document.getElementById("end");
    var actions_promise;

    EventRecorder.configure({
      mergeEventTypes: ["mousemove"],
      objectMap: {
         "div#start": start,
         "div#end": end
      }
    });


    start.addRecordedEventListener('mousemove', function (e) {
      e.stopPropagation();
      this.className = "green";
    });

    end.addRecordedEventListener('mousemove', function (e) {
      e.stopPropagation();
      this.className = "green";
      endTest();
      // Make sure the test finishes after all the input actions are completed.
      actions_promise.then( () =>  mouse_test.done() );
    });

    function endTest() {
      EventRecorder.stop();
      var results = EventRecorder.getRecords();
      // Check results:
      mouse_test.step(function () {
        assert_equals(results.length, 2, "Two mousemove events");
        assert_equals(results[0].event.type, "mousemove", "First event is a mousemove event");
        assert_equals(results[1].event.type, "mousemove", "Second event is a mousemove event");
        assert_equals(results[0].event.target, "div#start", "First event targetted #start");
        assert_equals(results[1].event.target, "div#end", "Second event targetted #end");
      });
    }

    EventRecorder.start();

    var rect = start.getClientRects()[0];
    // Inject mouse inputs.
    actions_promise = new test_driver.Actions()
        .pointerMove(0, 0, {origin: start})
        .pointerMove(Math.round(rect.width/2) + 10,
                     Math.round(rect.height/2) + 10, {origin: start})
        .send();
  </script>
 </body>
</html>